<%@ page language="java" contentType="text/html; charset=utf-8"
	pageEncoding="utf-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>

<head>
<meta charset="utf-8">
	<title>恒铸智能柜管理平台</title>
	<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
			<meta name="viewport"
				content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
				<link rel="stylesheet"
					href="${pageContext.request.contextPath}/resources/MUI/css/mui.min.css">
					<link rel="stylesheet"
						href="${pageContext.request.contextPath}/resources/css/zTreeStyle.css"
						type="text/css" />
					<link rel="stylesheet"
						href="${pageContext.request.contextPath}/resources/css/demo.css"
						type="text/css" />
					<script type="text/javascript"
						src="${pageContext.request.contextPath}/resources/js/jquery-1.4.4.min.js"></script>
					<script type="text/javascript"
						src="${pageContext.request.contextPath}/resources/js/jquery.ztree.core.js"></script>
					<script type="text/javascript"
						src="${pageContext.request.contextPath}/resources/js/jquery.ztree.excheck.js"></script>
					<script
						src="${pageContext.request.contextPath}/resources/MUI/js/mui.min.js"></script>
</head>
<body>
	<style type="text/css">
.compRole select {
	width: 90px !important;
	float: left !important;
}

a {
	text-decoration: none;
}

div.content_wrap {
	width: 220px;
	margin: auto;
	float: none;
	height: 100%;
	margin-top: -10px 0 20px 0;
}

.ztree * {
	font-size: 15px;
}

.ztree li span.button.switch {
	margin-top: 5px;
	height: 23px;
}

.ztree li a {
	margin: 4px;
}

div.zTreeDemoBackground {
	height: 450px;
}

ul.ztree {
	height: 430px;
	border: 1px solid #dadada;
	width: 100vw;
}

div.content_wrap div.left {
	width: 100vw;
	position: relative;
	top: -10px;
}

div.content_wrap {
	float: left;
}

.ztree li span.button {
	zoom: 1.3;
}

.ztree li a {
	margin: 8px;
}

.ztree li span {
	line-height: 20px;
}

.must {
	position: absolute;
	right: 10px;
	top: 14px;
	color: red;
}

.mui-input-group {
	margin-top: 50px;
}
</style>
	<header class="mui-bar mui-bar-nav"> <a
		class="mui-icon mui-icon-left-nav mui-pull-left"></a>
	<h1 class="mui-title">角色添加</h1>
	</header>
	<form class="mui-input-group">
		<div class="content_wrap">
			<div class="zTreeDemoBackground left">
				<ul id="treeDemo" class="ztree"></ul>
			</div>
		</div>
		<div class="mui-input-row">
			<label>角色名称:</label> <input type="text" class="roleName"
				name="roleName" placeholder="请输入角色名称"> <span class="must">*</span>
		</div>
		<div class="mui-input-row">
			<label>公司:</label> <select class="comp" name="compId"
				lay-verify="required">
				<c:forEach items="${compList }" var="list">
					<option value="${list.compId }">${list.compName }</option>
				</c:forEach>
			</select>
		</div>
		<div class="mui-input-row" style="height: 60xp;">
			<label>备注:</label>
			<textarea name="des" type="text" placeholder="请输入内容" class="des"></textarea>
		</div>
		<div class="mui-button-row">
			<a type="button" class="mui-btn mui-btn-primary submit">提交</a>
		</div>
	</form>
	<script type="text/javascript">
	var permissionIds="";
 	/* $("#treeDemo").on("touchstart","a",function(){

 		 if($(this).prev().hasClass('checkbox_true_full')){
        	  	
        	    //自己
        	    $(this).prev().addClass('checkbox_false_full');
        	    $(this).prev().removeClass('checkbox_true_full');
        	    //父级
        	    // $(this).parents().prev().prev().addClass('checkbox_false_full');
        	    //$(this).parents().prev().prev().removeClass('checkbox_true_full_focus');
        	    //子集
                $(this).parent('li').children().find("a").prev().addClass('checkbox_false_full');
                $(this).parent('li').children().find("a").prev().removeClass('checkbox_true_full');
          }else{
        	  	//自己
        	    $(this).prev().removeClass('checkbox_false_full');
      	        $(this).prev().addClass('checkbox_true_full');
      	        //父级
      	    	$(this).parents().prev().prev().addClass('checkbox_true_full');
      	      	$(this).parents().prev().prev().removeClass('checkbox_false_full');
      	        //子集
                $(this).parent('li').children().find("a").prev().addClass('checkbox_true_full');
                $(this).parent('li').children().find("a").prev().removeClass('checkbox_false_full');
          }
	}) */
		$(".mui-pull-left").on("touchstart",function(){
			history.back();
		})	
	
	  $(".submit").on("touchstart",function(){
		    let roleName = $(".roleName").val();

		    if(roleName == ""){
	    		mui.toast("带 "+'<span style="color:red;">*</span> 为必填项');
	    	}else if(permissionIds == ""){
	    		mui.toast("请选择权限！");
	    	}else{
				 $.get("/main/addRole?des="+$(".des").val()+"&roleName="+$(".roleName").val()+"&permissions="+permissionIds+"&compId="+$(".comp").val(),
							 function(rest){
						 if(rest.success){
							 mui.toast("添加成功");
							 history.back();
						 }else{
							 mui.toast(rest.message);
						 }
				 })
	    	}
	   })
		
	   var setting = {};
			$.get("/main/getRoleTree", function(data) {
				zNodes = data
				//正常加载信息
				if(window.sessionStorage.getItem("asd")) {
					var asd = window.sessionStorage.getItem("asd");
					zNodes = JSON.parse(asd).concat(zNodes); //转换成JSON格式
				}
			
				var setting = {
					check: {
						enable: true
					},
					data: {
						key: {
							title: "t"
						},
						simpleData: {
							enable: true
						}
					},
					callback: {
						onMouseDown: onMouseDown,
						onCheck:onCheck
					}
				};
			
				var log;
			
				function onMouseDown(event, treeId, treeNode) {
					showLog((treeNode ? treeNode.name : "root"), "down");
				}
			
				function showLog(str, logType) {
					log = $("#log" + "_" + logType);
					log.append("<li>" + str + "</li>");
					if(log.children("li").length > 1) {
						log.get(0).removeChild(log.children("li")[0]);
					}
				}
			
				var treeObj;
				$(document).ready(function() {
					treeObj = $.fn.zTree.init($("#treeDemo"), setting, zNodes);
					
					//防止没改权限就点提交使权限变成空
					nodes=treeObj.getCheckedNodes(true);
					for(var i=0;i<nodes.length;i++){
				    	if(null != nodes[i].id){
				    		permissionIds+=nodes[i].id + ",";
				    	}
				    }
				    return permissionIds;
				});
				function onCheck(e,treeId,treeNode){
				    nodes=treeObj.getCheckedNodes(true);
				    
				    //防止重复
				    permissionIds="";
				    for(var i=0;i<nodes.length;i++){
				    	if(null != nodes[i].id){
				    		permissionIds+=nodes[i].id + ",";
				    	}
				    }
				    return permissionIds;
			    }
			})
		
	</script>
</body>
</html>